<template>
	<view class="container">
		<view class="user-section">
			<image class="bg" src="/static/user-bg1.jpg"></image>
			<view class="user-info-box">
				<view class="user-info">
					<view class="portrait-box">
						<image class="portrait" :src="member.avatarUrl || '/static/missing-face.png'"></image>
					</view>
					<view class="info-box">
						<text class="username">{{ member.nickName || '游客' }}</text>
					</view>
				</view>
				<view class="icon" @click="changeMobile">
					<list-cell title="设置" v-if="!mobile"></list-cell>
					<list-cell :title="formatterMobile" v-else></list-cell>
				</view>

			</view>
			<view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png"></image>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					普通用户
				</view>
			</view>
		</view>
		<view class="cover-container" :style="[{ transform: coverTransform, transition: coverTransition }]">
			<!-- 下拉方法 -->
			<image class="arc" src="/static/arc.png"></image>
			<!-- 订单 -->
			<view class="order-section">
				<view class="order-item" @click="jump_toorder(0)" hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-daifukuan"></text>
					<text>待付款</text>
					<view class="number" v-if="list.no_payment > 0">
						<uni-badge :text="list.no_payment" type="error"></uni-badge>
					</view>
				</view>
				<view class="order-item" @click="jump_toorder(1)" hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-daifahuo"></text>
					<text>待发货</text>
					<view class="number" v-if="list.no_shipment > 0">
						<uni-badge :text="list.no_shipment" type="error"></uni-badge>
					</view>
				</view>
				<view class="order-item" @click="jump_toorder(2)" hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-tubiaolunkuo-"></text>
					<text>待收货</text>
					<view class="number" v-if="list.no_shipment > 0">
						<uni-badge :text="list.no_shipment" type="error"></uni-badge>
					</view>
				</view>
				<!-- <view class="order-item" @click="jump_toorder(3)" hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-shouhoutuikuan"></text>
					<text>退款/售后</text>
				</view> -->
				<view class="order-item" @click="jump_toorder(0)" hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-gengduo"></text>
					<text>更多</text>
				</view>
			</view>

			<!-- 浏览历史 -->
			<view class="history-section icon">
				<view @click="jump_toaddress">
					<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理"></list-cell>
				</view>
				<view @click="jump_toreseller">
					<list-cell icon="icon-iconfontweixin" iconColor="#54b4ef" title="推广赚米"></list-cell>
				</view>
				<view class="contact">
					<button type="primary" plain="true" open-type="contact" class="contact-btn"></button>
					<list-cell icon="icon-kefu" iconColor="#fd9a2b" calss="listCell" title="联系客服"> </list-cell>
				</view>
				<view @click="jump_tohelp">
					<list-cell icon="icon-bangzhu" iconColor="#FF0000" title="关于恒鲜惠"></list-cell>
				</view>
				<view @click="clear_cache" v-if="isLogin">
					<list-cell icon="icon-shezhi1" iconColor="#e07472" title="退出登录"></list-cell>
				</view>
			</view>
			<view class="cpy">
				<view>恒鲜惠商城系统</view>
				<view>Copyringht@2020</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	import uniBadge from '@/components/uni/uni-badge/uni-badge.vue';
	import listCell from '@/components/mix-list-cell';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			uniBadge
		},
		data() {
			return {
				bang: true,
				list: '',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				mobile: ''
			};
		},
		computed: {
			...mapGetters(['isLogin', 'member']),
			formatterMobile() {
				return this.mobile.substr(0, 3) + '*****' + this.mobile.substr(8, 3)
			}
		},
		async onLoad() {
			await this.userInfo().then(res => {
				if (res.code == 0) {
					if (res.data.mobile) {
						this.mobile = res.data.mobile;
					}
				}
			}).catch(err => {
				console.log('err', err);
				uni.showToast({
					title: err.msg,
					icon: 'none',
					duration: 1500
				})
			})
			this.getOrderIndex();
		},
		onShareAppMessage(res) {
			let referrer = uni.getStorageSync('referrer');
			console.log('referrer', referrer);
			if (referrer) {
				return {
					title: '恒鲜惠美食在线',
					path: '/pages/menu/menu?referrer=' + referrer,
					imageUrl: require('static/images/menu/banner.jpeg')
				}
			}
		},
		methods: {
			...mapMutations(['SET_REFERRER', 'SET_TOKEN', 'SET_MEMBER', 'SET_MY_ORDER_ACTIVE']),
			...mapActions(['orderIndex', 'userInfo']),
			contact() {
				console.log(this.$refs)
				this.$refs.contactBtn.click();
			},
			getOrderIndex() {
				uni.showLoading({
					mask: true
				});
				this.orderIndex().then(res => {
					uni.hideLoading();
				});
			},
			jump_tohelp() {
				uni.navigateTo({
					url: '/pages/list/list'
				});
			},
			jump_toorder(e) {
				this.SET_MY_ORDER_ACTIVE(e)
				uni.switchTab({
					url: '/pages/myOrder/myOrder'
				});
			},
			jump_toaddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			jump_toreseller() {
				uni.navigateTo({
					url: '/pages/user/reseller/reseller'
				});
			},
			changeMobile() {
				uni.navigateTo({
					url: '/pages/user/mobile/mobile'
				})
			},
			clear_cache() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗?',
					confirmText: '确定'
				}).then(([err, suc]) => {
					if (suc.confirm) {
						uni.clearStorageSync();
						this.SET_REFERRER(null);
						this.SET_TOKEN(null);
						this.SET_MEMBER({});
						uni.reLaunch({
							url: '/pages/menu/menu'
						});
					}
				});
			},
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	};
</script>
<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.contact {
		position: relative;

		.contact-btn {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
			opacity: 0;
		}

		.listCell {
			position: absolute;
			z-index: 1;
		}
	}

	.cpy {
		padding: 20px 0;
		text-align: center;
		font-size: 12px;
		color: #666;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: 0.7;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 1;

		.user-info {
			display: flex;
			align-items: center;
		}

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, #333333, #000000);
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base + 2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		margin-top: -160upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		flex-wrap: wrap;

		.bangding {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			border-top: 1px solid #f1f3f6;
			padding: 10px 10px 0;
			margin-top: 15px;

			.bd-l {
				height: 27px;
				line-height: 27px;
			}

			.bd-r {
				color: #fb526a;
				border: 1px solid #fb526a;
				border-radius: 3px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				padding: 0 10px;
				border: none;
				outline: none;
			}
		}

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;

			.number {
				position: absolute;
				top: -3px;
				right: 10px;
			}
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
	}
</style>
